<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="86px">
      <el-form-item label="客户姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="责任人姓名" prop="name">
        <el-input
          v-model="queryParams.chargePersonName"
          placeholder="请输入责任姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系人名称" prop="contactName">
        <el-input
          v-model="queryParams.contactName"
          placeholder="请输入联系人名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactTelephone">
        <el-input
          v-model="queryParams.contactTelephone"
          placeholder="请输入联系人电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <el-select v-model="queryParams.label" placeholder="标签">
          <el-option
            v-for="item in labelOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户来源" prop="source">
        <el-select v-model="queryParams.source" placeholder="客户来源">
          <el-option
            v-for="item in sourceOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="所属地区" prop="region">
              <el-input
                v-model="queryParams.region"
                placeholder="请输入所属地区"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>-->
      <el-form-item label="类别" prop="category">
        <el-select v-model="queryParams.category" placeholder="客户类别">
          <el-option
            v-for="item in categoryOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="客户地址" prop="address">
              <el-input
                v-model="queryParams.address"
                placeholder="请输入客户地址"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="创建者id" prop="createId">
              <el-input
                v-model="queryParams.createId"
                placeholder="请输入创建者id"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>-->
      <el-form-item label="流失原因" prop="lossReasons">
        <el-select v-model="queryParams.lossReasons" placeholder="流失原因">
          <el-option
            v-for="item in lossReasonsOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="流失备注" prop="lossRemark">
              <el-input
                v-model="queryParams.lossRemark"
                placeholder="请输入流失备注"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="责任人id" prop="chargePersonId">
              <el-input
                v-model="queryParams.chargePersonId"
                placeholder="请输入责任人id"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="责任人名称" prop="chargePersonName">
              <el-input
                v-model="queryParams.chargePersonName"
                placeholder="请输入责任人名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="协同人id" prop="collaboratorId">
              <el-input
                v-model="queryParams.collaboratorId"
                placeholder="请输入协同人id"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="协同人名称" prop="collaboratorName">
              <el-input
                v-model="queryParams.collaboratorName"
                placeholder="请输入协同人名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="最后跟进时间" prop="finalFollowTime">
              <el-date-picker clearable
                v-model="queryParams.finalFollowTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择最后跟进时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="分配时间" prop="allocationTime">
              <el-date-picker clearable
                v-model="queryParams.allocationTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择分配时间">
              </el-date-picker>
            </el-form-item>-->
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" @click="handleQuery2">今日新增</el-button>
        <el-button icon="el-icon-search" size="mini" @click="handleQuery3">我负责的</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['module:customer:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['module:customer:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['module:customer:import']"
        >导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="editPersonName">批量修改责任人</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="customerList"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="客户名称" align="center" prop="name" width="200px" v-if="columns[0].visible"/>
      <el-table-column label="联系人名称" align="center" prop="contactName" width="100" v-if="columns[1].visible" />
      <el-table-column label="联系人电话" align="center" width="110" v-if="columns[2].visible">
        <template slot-scope="scope">
          <span v-if="user.userId==scope.row.chargePersonId">{{ scope.row.contactTelephone }}</span>
          <el-button type="text" v-if="user.userId!=scope.row.chargePersonId">暂无查看权限</el-button>
        </template>
      </el-table-column>
      <el-table-column label="标签" align="center" prop="label" v-if="columns[3].visible"/>
      <el-table-column label="客户来源" align="center" prop="source" v-if="columns[4].visible"/>
      <el-table-column label="所属地区" align="center" prop="region" v-if="columns[5].visible"/>
      <el-table-column label="类别" align="center" prop="category" v-if="columns[6].visible"/>
      <el-table-column label="客户地址" align="center" prop="address" width="200px" v-if="columns[7].visible"/>
      <el-table-column label="备注" align="center" prop="remark" v-if="columns[8].visible"/>
      <el-table-column label="流失原因" align="center" prop="lossReasons" v-if="columns[9].visible"/>
      <el-table-column label="流失备注" align="center" prop="lossRemark" v-if="columns[10].visible"/>
      <el-table-column label="责任人名称" align="center" prop="chargePersonName" width="100" v-if="columns[11].visible"/>
      <el-table-column label="协同人名称" align="center" prop="collaboratorName" width="100" v-if="columns[12].visible"/>
      <el-table-column label="最后跟进时间" align="center" prop="finalFollowTime" width="100" v-if="columns[13].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.finalFollowTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分配时间" align="center" prop="allocationTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.allocationTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="状态(0审批中、已通过)" align="center" prop="status" />-->
      <el-table-column label="客户状态" align="center" prop="customerStatus" v-if="columns[14].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['module:customer:update']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['module:customer:delete']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改客户对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入客户名称"/>
        </el-form-item>
        <el-form-item label="联系人名称" prop="contactName">
          <el-input v-model="form.contactName" placeholder="请输入联系人名称"/>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactTelephone">
          <el-input v-model="form.contactTelephone" placeholder="请输入联系人电话"/>
        </el-form-item>
        <el-form-item label="标签" prop="label">
          <el-select v-model="form.label" placeholder="标签">
            <el-option
              v-for="item in labelOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户来源" prop="source">
          <el-select v-model="form.source" placeholder="客户来源">
            <el-option
              v-for="item in sourceOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属地区" prop="regionId">
          <el-select v-model="form.regionId" placeholder="所属地区">
            <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="regionChange(item)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select v-model="form.category" placeholder="类别">
            <el-option
              v-for="item in categoryOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户状态" prop="customerStatus">
          <el-select v-model="form.customerStatus" placeholder="客户状态">
            <el-option
              v-for="item in customerStatusOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户地址" prop="address">
          <el-cascader v-model="form.addressOptions"
                       class="f-left"
                       :options="addressOptions"
                       @change="addressChange"
                       :props="optionProps"
                       placeholder="请选择客户地址"
                       filterable
          ></el-cascader>
          <div style="margin-top: 10px">
            <el-input v-model="form.address" placeholder="请输入客户详细地址"/>
          </div>

        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
        <el-form-item label="流失原因" prop="lossReasons">
          <el-select v-model="form.lossReasons" placeholder="流失原因">
            <el-option
              v-for="item in lossReasonsOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流失备注" prop="lossRemark">
          <el-input v-model="form.lossRemark" placeholder="请输入流失备注"/>
        </el-form-item>
        <!--        <el-form-item label="责任人id" prop="chargePersonId">
                  <el-input v-model="form.chargePersonId" placeholder="请输入责任人id" />
                </el-form-item>-->
        <el-form-item label="责任人名称" prop="chargePersonName">
          <el-input style="width: 200px" v-model="form.chargePersonName" readonly placeholder="请输入责任人名称">
            <template slot="append">
              <el-button type="primary" @click="openImportUser1">
                选择责任人
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <!--        <el-form-item label="协同人id" prop="collaboratorId">
                  <el-input v-model="form.collaboratorId" placeholder="请输入协同人id" />
                </el-form-item>-->
        <el-form-item label="协同人名称" prop="collaboratorName">
          <el-input style="width: 200px" v-model="form.collaboratorName" readonly placeholder="请输入协同人名称">
            <template slot="append">
              <el-button type="primary" @click="openImportUser2">
                选择协同人
              </el-button>
            </template>
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 客户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <import-user ref="import" @showUser="showUser"></import-user>

    <!--  批量修改责任人名称
      1.点击批量按钮，显示对话框
      --
      2.对话框包含责任人名称的输入框，确定，取消按钮，
      3.点击确定，关闭弹窗，清空表单内容，列表重新渲染

       <el-dialog title="批量修改责任人" :visible.sync="dialogPersonShow" :before-close="handleClosePersonNameShow" width="600px">
    -->
    <el-dialog title="批量修改责任人" :visible.sync="dialogPersonShow" width="600px">
      <el-form ref="personForm" :model="personForm" :rules="personFormRules">
        <!--        <el-form-item label="责任人名称" prop="personName" label-width="200px">-->
        <!--          <el-input v-model="personForm.personName" style="width: 300px" placeholder="请输入负责人名称"-->
        <!--                    autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <el-form-item label="责任人名称" prop="chargePersonName">
          <el-input style="width: 200px" v-model="personForm.chargePersonName"  placeholder="请输入责任人名称">
            <template slot="append">
              <el-button type="primary" @click="openImportUser(3)">
                选择责任人
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPersonNameCancel">取 消</el-button>
        <el-button type="primary" @click="dialogPersonNameSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer, editPerson} from "@/api/module/customer";
import {provinceNameList} from '@/api/module/region';
import {getDicts} from '@/api/system/dict/data';
import {getLoginUser} from "@/api/system/user"
import importUser from "./user";
import {getToken} from "@/utils/auth";
import log from "@/views/monitor/job/log";

export default {
  name: "Customer",
  components: {importUser},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户表格数据
      customerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      columns: [
        { key: 0, label: `客户名称`, visible: true },
        { key: 1, label: `联系人名称`, visible: true },
        { key: 2, label: `联系电话`, visible: true },
        { key: 3, label: `客户标签`, visible: true },
        { key: 4, label: `客户来源`, visible: true },
        { key: 5, label: `所属地区`, visible: true },
        { key: 6, label: `类别`, visible: true },
        { key: 7, label: `客户地址`, visible: true },
        { key: 8, label: `备注`, visible: true },
        { key: 9, label: `流失原因`, visible: true },
        { key: 10, label: `流失备注`, visible: true },
        { key: 11, label: `责任人名称`, visible: true },
        { key: 12, label: `协同人`, visible: true },
        { key: 13, label: `最后跟进时间`, visible: true },
        { key: 12, label: `客户状态`, visible: true },


      ],

      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/module/customer/importCustomer"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        contactName: null,
        contactTelephone: null,
        label: null,
        source: null,
        region: null,
        category: null,
        address: null,
        createId: null,
        lossReasons: null,
        lossRemark: null,
        chargePersonId: null,
        chargePersonName: null,//责任人名称
        collaboratorId: null,
        collaboratorName: null,
        finalFollowTime: null,
        allocationTime: null,
        status: null,
        customerStatus: null,
        search: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          {required: true, message: '客户名称不能为空', trigger: 'change'}
        ],
        contactName: [
          {required: true, message: '联系人名称不能为空', trigger: 'change'}
        ],
        contactTelephone: [
          {
            required: true,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (/^1[3-9]\d{9}$/.test(value) == false) {
                callback(new Error('请输入11位手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        label: [
          {required: true, message: '客户标签不能为空', trigger: 'change'}
        ],
        source: [
          {required: true, message: '客户来源不能为空', trigger: 'change'}
        ],
        regionId: [
          {required: true, message: '所属地区不能为空', trigger: 'change'}
        ],
        category: [
          {required: true, message: '客户类别不能为空', trigger: 'change'}
        ],
        chargePersonName: [
          {required: true, message: '负责人不能为空', trigger: 'change'}
        ],
      },
      regionOptions: [], //地区选择列表
      addressOptions: [], //地址选择列表
      labelOptions: [], // 标签
      sourceOptions: [], // 来源
      categoryOptions: [], // 类别
      lossReasonsOptions: [], // 流失原因
      customerStatusOptions: [], // 状态
      optionProps: {
        value: 'label',
        label: 'label',
        children: 'children'
      },
      // 是否显示用户弹出层
      openUser: false,
      user: {},

      dialogPersonShow: false,//批量修改责任人弹框
      personForm: {
        chargePersonName: ' ',
        chargePersonId:' ',
        idList:[]
      },//批量操作负责人的表单
      personFormRules: {
        personName: [{required: true, message: '请输入活动名称', trigger: 'change'}]
      },
      personArr: []//选中的多行数据
    };
  },
  created() {

    this.getAreaList();
    this.getLabelOptions();
    this.getSourceOptions();
    this.getCategoryOptions();
    this.getLossReasonsOptions();
    this.getCustomerStatusOptions();
    this.getsponsor()
    this.getList();
  },
  methods: {
    //1.打开批量修改弹框
    editPersonName() {
      this.dialogPersonShow = true
    },
    //点击取消按钮
    dialogPersonNameCancel() {
      // this.personForm.personName = null
      this.personForm={
        chargePersonName: null,
        chargePersonId:null,
        idList:[]
      }
      this.dialogPersonShow = false
    },
    //点击确定按钮
    dialogPersonNameSubmit() {
      //判断有无内容
      if (!this.personForm.chargePersonName) {
        return this.$message('请输入负责人')
      }else {

        editPerson(this.personForm).then(res => {
          console.log(res)
          //关闭弹窗
          this.dialogPersonShow = false
          this.getList()
          //重新渲染
          // this.getList();
        }).catch(err => {
          this.$message.error(err)

        })
      }






    },


    //获取发起人
    getsponsor() {
      getLoginUser(this.queryParams).then(response => {
        this.user = response.user;

      })
    },
    /** 查询客户列表 */
    getList() {
      this.loading = true;
      listCustomer(this.queryParams).then(response => {
        this.customerList = response.rows;
        // 产品类型判断
        let arr = this.customerList;
        arr.forEach(item => {
          item.label = this.getValue(this.labelOptions, item.label)
          item.source = this.getValue(this.sourceOptions, item.source)
          item.category = this.getValue(this.categoryOptions, item.category)
          item.lossReasons = this.getValue(this.lossReasonsOptions, item.lossReasons)
          item.customerStatus = this.getValue(this.customerStatusOptions, item.customerStatus)
        });
        this.customerList = arr;
        this.total = response.total;
        this.loading = false;
      });
    },
    getValue(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (item === arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        contactName: null,
        contactTelephone: null,
        label: null,
        source: null,
        region: null,
        category: null,
        regionId: null,
        address: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        createId: null,
        remark: null,
        lossReasons: null,
        lossRemark: null,
        chargePersonId: null,
        chargePersonName: null,
        collaboratorId: null,
        collaboratorName: null,
        finalFollowTime: null,
        allocationTime: null,
        status: "0",
        customerStatus: "",
        addressShow: null,
        addressOptions: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 今日新增 */
    handleQuery2() {
      this.queryParams.pageNum = 1;
      this.queryParams.search = 1;
      this.getList();
    },
    /** 我负责的 */
    handleQuery3() {
      this.queryParams.pageNum = 1;
      this.queryParams.chargePersonId = this.user.userId;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.form = {
        id: null,
        name: null,
        contactName: null,
        contactTelephone: null,
        label: null,
        source: null,
        region: null,
        category: null,
        regionId: null,
        address: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        createId: null,
        remark: null,
        lossReasons: null,
        lossRemark: null,
        chargePersonId: null,
        chargePersonName: null,
        collaboratorId: null,
        collaboratorName: null,
        finalFollowTime: null,
        allocationTime: null,
        status: "0",
        customerStatus: "",
        addressShow: null,
        addressOptions: null
      };
      this.queryParams = {}
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.personArr=selection.map(item => item.id)
      console.log('选中的用户id',this.personArr)
     this.personForm.idList=this.personArr
      var arr=[]
      this.personForm.idList.forEach(item=>{
        var newObject={id:''}
        newObject.id=item
        arr.push(newObject)
      })
      this.personForm.idList=arr
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加客户";
      this.form.chargePersonName = this.user.username
      this.form.chargePersonId = this.user.userId
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCustomer(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除客户编号为"' + ids + '"的数据项？').then(function () {
        return delCustomer(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('module/customer/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "客户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/module/customer/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },

    //获取地区选择
    getAreaList() {
      provinceNameList().then(res => {
        this.regionOptions = res.rows;
        let arr = JSON.parse(JSON.stringify(res.rows)) //深拷贝
        /*    arr.forEach(item => {
              item.children.forEach(cItem => delete cItem.children)
            })
            debugger*/
        this.addressOptions = arr
      })
    },

    // 获取标签
    getLabelOptions() {
      getDicts('biz_label').then(response => {
        this.labelOptions = response.data
      })
    },
    // 获取来源
    getSourceOptions() {
      getDicts('biz_source').then(response => {
        this.sourceOptions = response.data
      })
    },
    // 获取类别
    getCategoryOptions() {
      getDicts('biz_category').then(response => {
        this.categoryOptions = response.data
      })
    },
    // 获取流失原因
    getLossReasonsOptions() {
      getDicts('biz_loss_reasons').then(response => {
        this.lossReasonsOptions = response.data
      })
    },
    // 获取状态
    getCustomerStatusOptions() {
      getDicts('biz_customer_status').then(response => {
        this.customerStatusOptions = response.data
      })
    },
    // 地址选择
    addressChange(value) {
      this.form.address = value[0] + value[1] + value[2];
    },
    // 地址选择
    regionChange(value) {
      this.form.region = value.label;
      this.form.regionId = value.value;
    },
    /** 打开负责人弹窗 */
    openImportUser1() {
      this.$refs.import.show(1);
    },
    /** 打开负责人弹窗 */
    openImportUser2() {
      this.$refs.import.show(2);
    },
    openImportUser(num){
      this.$refs.import.show(3);
    },
    showUser(data) {
      if (data.type == 1) {
        //负责人
        this.form.chargePersonId = data.userId;
        this.form.chargePersonName = data.userName;
      } else if (data.type == 2) {
        //协同人
        this.form.collaboratorId = data.userId;
        this.form.collaboratorName = data.userName;
      }else if(data.type == 3){
        this.personForm.chargePersonName = data.userName;
        this.personForm.chargePersonId=data.userId
        console.log(this.personForm)
      }
    }
  }
}
;
</script>
